
var newer = newer || {};
newer.gd = newer.gd || {};

newer.CircleCreateForm = function(o) {
	this.root = o.root;
	
	this.map = {};
	this.init();
};

newer.CircleCreateForm.prototype = {
	init: function() {
		var self = this;
		$("#"+this.root).html('<div id="circle-create-form-internal"></div>');
		this.layout();
		

		
		$("#circle-create-form-after-submit-dialog").dialog({ autoOpen: false, modal: true});
		
		$("#circle-create-form-submit").button();
		
		this.map = new newer.LocationMap({inputId:"circle-create-form-location-input",mapCanvasId:"circle-create-form-location-canvas"});
		
		$("#circle-create-form-tags-input").tagsInput();
		
		$("#circle-create-form-submit").on("click", function(event) {
			$.ajax({
				async: false,
				url: "/Circles/createCircle?name=" + $("#circle-create-form-name-input").val()
					+ "&addr=" + $("#circle-create-form-location-input").val()
					+ "&lat=" + self.map.lat
					+ "&lng=" + self.map.lng
					+ "&tags=" + $("#circle-create-form-tags-input").val()
					+ "&uid=" + newer.gd.user.id, 
				success: self.after
			});
		})
	},
	
	after: function(result) {
		if(result.success) {
			$("#circle-create-form-after-submit-dialog").dialog('open');
			$("#circle-create-form-after-submit-dialog-link").button().on("click", {cid:result.cid}, function(event) {
				document.location.href='/newer/'+newer.UriHelper.CIRCLE_TYPE+'/'+event.data.cid+'/t/about/';
			});
		}
	},
	
	layout: function() {
		$("#circle-create-form-internal").html("");
		$("#circle-create-form-internal").append('<div id="circle-create-form-intro">Please fill the form to create the circle: </div>');
		
		$("#circle-create-form-internal").append('<div id="circle-create-form-name">Circle name:<input id="circle-create-form-name-input" /></div>');
		$("#circle-create-form-internal").append('<div id="circle-create-form-tags">Circle tags:<input id="circle-create-form-tags-input" /></div>');
		$("#circle-create-form-internal").append('<div id="circle-create-form-location">Circle location:<input id="circle-create-form-location-input" /><div id="circle-create-form-location-canvas"></div></div>');
		$("#circle-create-form-internal").append('<div id="circle-create-form-submit" class="link-like-element">Submit</div>');
		$("#circle-create-form-internal").append('<div id="circle-create-form-after-submit-dialog" title="Circle created!"></div>');
		$("#circle-create-form-after-submit-dialog").html('<div id="circle-create-form-after-submit-dialog-link" class="link-like-element">Go to the circle profile page..</div>');
	}
};